<template>
    <div>
        <!--top-->
        <div>
            <div class="user-Home-top-1">


                <img :src="userheader" class="user-Home-top-1-1">

                <div >
                    <p class="user-Home-top-1-2">{{username}}的主页</p>
                </div>




            </div>
        </div>


        <div>

                <van-list
                        v-model="loading"
                        :finished="finished"
                        finished-text="没有更多了"
                        @load="onLoad"
                >
                    <template>
                        <div class="liuyan">留言板</div>
                        <div  v-for="LMessage in LMessageList" :key="LMessage" v-on:click="toUserHome(LMessage.id)">

                            <div class="comment-item">
                                <div class="comment-item-top">
                                    <img :src="LMessage.headerUrl" class="CommenterHeader">
                                    <div >
                                        <div class="content">
                                            <p class="Commentator-name">{{LMessage.userName}}</p>
                                            <p class="Commentator-time">{{LMessage.time}}</p>
                                        </div>
                                    </div>

                                </div>
                                <div class="comment-item-message" >{{LMessage.text}}</div>
                            </div>


                        </div>
                    </template>
                </van-list>

        </div>
        <!--评论表单-->
        <div>
            <template>
                <div>
                    <van-form>
                        <div class="submitComment">
                            <div style="width: 325px" >
                                <van-field
                                        v-model="VisitorLeavingMessage"
                                        name="用户评论"
                                        placeholder="随便说点什么吧"
                                        :rules="[{ message: '随便说点什么吧' }]"
                                />
                            </div>

                            <div>
                                <van-button round block type="info" color="#515151"  native-type="submit" v-on:click="onSubmit">提交</van-button>
                            </div>
                        </div>


                    </van-form>
                </div>
            </template>

        </div>
    </div>
</template>

<script>
    import Vue from 'vue';
    import {Image as VanImage} from 'vant';
    import { PullRefresh } from 'vant';
    import { List } from 'vant';

    Vue.use(List);
    import {ApiService} from "../../axios/apiService";
    Vue.use(PullRefresh);
    Vue.use(VanImage);
    const UserMessage = new ApiService("/userHome/User")
    const LeavingMessage = new ApiService("/userHome/LeavingMessage")
    export default {
        name: "userHome",
        mounted(){
          this.getUserMessege();
        },
        data() {
            return {
                VisitorLeavingMessage:"",
                count: 0,
                isLoading: false,
                username: "用户123",
                userId:0,
                userheader: "https://img01.yzcdn.cn/vant/cat.jpeg",
                LMessageList:[
                    /*{
                        commenterId:"我是用户id",
                        commenterName:"张三",
                        leavingTime:"2020/4/27",
                        text:"我是一条评论",
                        commenterHeader:"https://img01.yzcdn.cn/vant/cat.jpeg"
                    }*/
                ],
            }
        },
        methods:{
            getUserMessege(){
                var userId  = this.$route.params.userId;
                console.log("userID:"+userId);
                UserMessage.getViewById(userId).then(res=>{
                    this.userheader =  res.data.headerUrl;/*传数据*/
                    this.username  = res.data.name;
                    this.userId =res.data.id;//
                })

                console.log("这个要显示"+userId)
                //TODO userId是怎么挂在前端的
                LeavingMessage.list(userId).then(res=>{
                    console.log("这个不显示")
                    console.log(res.data)
                    this.LMessageList= res.data;
                })
            },
            //留言
            onSubmit(){
                console.log("留言")
                const leavingMessage = new ApiService("/userHome/inputLeavingMessage/")
                console.log(leavingMessage.getCookie("userid"))
                console.log(this.userId)
                console.log(this.VisitorLeavingMessage)
                leavingMessage.getParams({
                    visitorId:leavingMessage.getCookie("userid"),
                    hostId:this.userId,
                    leavingText:this.VisitorLeavingMessage,
                }).then(res=>{
                    console.log(res.data)
                })
                location.reload();//提交留言后刷新一下界面git

            },
            onLoad(){},
            finished(){}
        },
    }
</script>

<style scoped>
    .liuyan{
        text-align: center;
        background: #EEF6F8;
        font-size: 18px;
    }
    .comment-item-message{
    margin: auto;
    margin-left: 34px;
    margin-right: 24px;
    margin-top: 0px;}
    .comment-item{
        background: white;
        margin-bottom: 4px;
    }
    .Commentator-name {
        margin-left: 3px;
        margin-top: auto;
        color: black;
        font-size: 15px;
        font-weight: 600;
        margin-bottom: auto;
    }

    .comment-item-top {
        margin-bottom: 3px;
        display: block;
        table-layout: auto;
        background: white;
        display: flex;

    }
    .Commentator-time{
        margin-left: 3px;
        margin-top: auto;
        color: gray;
        font-weight: 500;
        margin-bottom: auto;
    }
    .CommenterHeader{
        width: 2.5rem;
        height: 2.5rem;
        border-radius:2.5rem;
    }
    .user-Home-top-1-2{
        margin-left: 22px;
        margin-top: 86px;
        font-size: 20px;
        font-weight: 600;
    }
    .user-Home-top-1-1 {
        width: 22.5%;
        height: auto;
        border-radius: 50%;
        margin-top: 52px;
        margin-left: 17px;
    }

    .user-Home-top-1 {
        background-image: url(https://t7.baidu.com/it/u=3168329137,3263381309&fm=193&f=GIF);
        width: 100%;
        height: 128px;

        display: flex;
    }
</style>